<template>
	<view class="my-search" :style="{ 'background-color': bgColor }">
		<view class="search-content" :style="{ 'border-radius': radius + 'px' }" @click="bindClick">
			<uni-icons type="search"></uni-icons>
			搜索
		</view>
	</view>
</template>

<script>
export default {
	name: 'MySearch',
	// 实现自定义组件样式
	props: {
		// 背景颜色
		bgColor: {
			type: String,
			default: '#c00000'
		},
		radius: {
			type: [Number, String],
			default: 18
		}
	},
	data() {
		return {}
	},
	methods:{
		bindClick(){
			this.$emit('click')
		}
	}
}
</script>

<style lang="scss">
.my-search {
	//实现吸顶效果 设置定位效果为“吸顶”
	  position: sticky;
	  // 吸顶的“位置”
	  top: 0;
	  // 提高层级，防止被覆盖
	  z-index: 999;
	height: 50px;
	// background-color: #c00000;
	display: flex;
	justify-content: center;
	align-items: center;
	.search-content {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		width: 95%;
		height: 35px;
		// border-radius: 15px;
		text-align: center;
		line-height: 30px;
		font-size: 14px;
	}
}
</style>
